<template>
  <div class="box order">
    <header class="header">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
      >
        <template #title>
          <van-search
            v-model="value"
            shape="round"
            placeholder="搜索订单"
          />
        </template>
        <template #right>
          <div>
            <van-icon name="filter-o" size="22" />
            <span>筛选</span>
          </div>
          <div>
            <van-icon name="bill-o" size="22" />
            <span>账单</span>
          </div>
          <div>
            <van-icon name="comment-o" size="22" />
            <span>消息</span>
          </div>
        </template>
      </van-nav-bar>
    </header>
    <div class="cont">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="警惕不良号码以快递丢失、商品质量问题等为由，冒充客服给您发送链接办理退款。谨防诈骗，如有疑问请咨询唯品会官方客服400-6789-888。"
          />
          <van-empty
            image=""
            description="暂无订单"
            v-if="flag"
          />
          <div v-else>
            <div class="orderList" v-for="val in orderList" :key="val.orderId">
              <div class="orderCont" @click="$router.push('/orderDetail/' + val.orderId)">
                <van-card
                  v-for="data in val.proData"
                  :key="data.proId"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.proImg1"
                >
                  <template #tags>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天无理由退货</van-tag>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天可换</van-tag>
                  </template>
                </van-card>
              </div>
              <div class="orderFooter">
                <p class="orderId">订单号：{{val.orderId}}</p>
                <p>总价：<span class="orderPrice">￥{{orderPrice(val.orderId)}}</span></p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="代付款">
          <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="警惕不良号码以快递丢失、商品质量问题等为由，冒充客服给您发送链接办理退款。谨防诈骗，如有疑问请咨询唯品会官方客服400-6789-888。"
          />
          <van-empty
            image=""
            description="暂无订单"
            v-if="flag1"
          />
          <div v-else>
            <div class="orderList" v-for="val in orderList1" :key="val.orderId">
              <div class="orderCont" @click="$router.push('/orderDetail/' + val.orderId)">
                <van-card
                  v-for="data in val.proData"
                  :key="data.proId"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.proImg1"
                >
                  <template #tags>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天无理由退货</van-tag>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天可换</van-tag>
                  </template>
                </van-card>
              </div>
              <div class="orderFooter">
                <p class="orderId">订单号：{{val.orderId}}</p>
                <p>总价：<span class="orderPrice">￥{{orderPrice(val.orderId)}}</span></p>
                <van-button color="red" plain round class="goPay" @click="goPay(val.orderId)">去支付</van-button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="警惕不良号码以快递丢失、商品质量问题等为由，冒充客服给您发送链接办理退款。谨防诈骗，如有疑问请咨询唯品会官方客服400-6789-888。"
          />
          <van-empty
            image=""
            description="暂无订单"
            v-if="flag2"
          />
          <div v-else>
            <div class="orderList" v-for="val in orderList2" :key="val.orderId">
              <div class="orderCont" @click="$router.push('/orderDetail/' + val.orderId)">
                <van-card
                  v-for="data in val.proData"
                  :key="data.proId"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.proImg1"
                >
                  <template #tags>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天无理由退货</van-tag>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天可换</van-tag>
                  </template>
                </van-card>
              </div>
              <div class="orderFooter">
                <p class="orderId">订单号：{{val.orderId}}</p>
                <p>总价：<span class="orderPrice">￥{{orderPrice(val.orderId)}}</span></p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="警惕不良号码以快递丢失、商品质量问题等为由，冒充客服给您发送链接办理退款。谨防诈骗，如有疑问请咨询唯品会官方客服400-6789-888。"
          />
          <van-empty
            image=""
            description="暂无订单"
            v-if="flag3"
          />
          <div v-else>
            <div class="orderList" v-for="val in orderList3" :key="val.orderId">
              <div class="orderCont" @click="$router.push('/orderDetail/' + val.orderId)">
                <van-card
                  v-for="data in val.proData"
                  :key="data.proId"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.proImg1"
                >
                  <template #tags>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天无理由退货</van-tag>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天可换</van-tag>
                  </template>
                </van-card>
              </div>
              <div class="orderFooter">
                <p class="orderId">订单号：{{val.orderId}}</p>
                <p>总价：<span class="orderPrice">￥{{orderPrice(val.orderId)}}</span></p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="已完成">
          <van-notice-bar
            left-icon="volume-o"
            wrapable
            :scrollable="false"
            text="警惕不良号码以快递丢失、商品质量问题等为由，冒充客服给您发送链接办理退款。谨防诈骗，如有疑问请咨询唯品会官方客服400-6789-888。"
          />
          <van-empty
            image=""
            description="暂无订单"
            v-if="flag4"
          />
          <div v-else>
            <div class="orderList" v-for="val in orderList4" :key="val.orderId">
              <div class="orderCont" @click="$router.push('/orderDetail/' + val.orderId)">
                <van-card
                  v-for="data in val.proData"
                  :key="data.proId"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.proImg1"
                >
                  <template #tags>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天无理由退货</van-tag>
                    <van-tag color="#E1FFFF" text-color="#4169E1">7天可换</van-tag>
                  </template>
                </van-card>
              </div>
              <div class="orderFooter">
                <p class="orderId">订单号：{{val.orderId}}</p>
                <p>总价：<span class="orderPrice">￥{{orderPrice(val.orderId)}}</span></p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Toast, Icon, Tab, Tabs, Search, NoticeBar, Empty, Card, Tag, Button } from 'vant'

import { getOrder, payOrder } from '../../api/index.js'

import { mapState } from 'vuex'

Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Search)
Vue.use(NoticeBar)
Vue.use(Empty)
Vue.use(Card)
Vue.use(Tag)
Vue.use(Button)

export default {
  data () {
    return {
      active: 1,
      value: '',
      orderList: [],
      orderList1: [],
      orderList2: [],
      orderList3: [],
      orderList4: []
    }
  },
  mounted () {
    // console.log(this.$route)
    this.active = this.$route.query.active - 0
    getOrder({
      userId: this.userId
    }).then(res => {
      this.orderList = res.data.data
      res.data.data.forEach(val => {
        switch (val.state) {
          case 0:
            this.orderList1.push(val)
            break
          case 1:
            this.orderList2.push(val)
            break
          case 2:
            this.orderList3.push(val)
            break
          case 3:
            this.orderList4.push(val)
            break
        }
        // console.log(this.orderList2, this.orderList3, this.orderList4)
      })
    })
  },
  methods: {
    onClickLeft () {
      this.$router.back()
      Toast('返回')
    },
    orderPrice (id) {
      let i = 0
      this.orderList.some((val, idx) => {
        i = idx
        return val.orderId === id
      })
      return this.orderList[i].proData.reduce((prev, next) => {
        return (prev * 100000000000000 + next.num * next.price * 100000000000000) / 100000000000000
      }, 0)
    },
    goPay (id) {
      payOrder ({
        userId: this.userId,
        orderId: id
      }).then(res => {
        // console.log(res)
        this.active = 2
        this.$router.push('/order?active=' + this.active)
        this.$router.go(0)
        // console.log(id)
      })
    }
  },
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      userId: state => state.user.userId
    }),
    flag () {
      return this.orderList.length < 1
    },
    flag1 () {
      return this.orderList1.length < 1
    },
    flag2 () {
      return this.orderList2.length < 1
    },
    flag3 () {
      return this.orderList3.length < 1
    },
    flag4 () {
      return this.orderList4.length < 1
    }
  }
}
</script>

<style lang='scss'>
.order .van-hairline--bottom::after {
  border: none;
}
.order .van-tabs__wrap {
  height: auto;
  .van-tabs__nav {
    height: 0.44rem;
    border-bottom: 1px solid #eee;
  }
  .van-tabs__nav--line {
    padding-bottom: 0;
  }
}
.order .van-nav-bar__title {
    max-width: 50%;
    margin-left: 0.4rem;
    color: #323233;
    font-weight: 500;
    font-size: 16px;
}
.order .van-nav-bar .van-icon {
    color: #666;
    font-size: 24px;
}
.order .van-tabs__line {
  bottom: 0.08rem;
}
.order .van-tab--active {
  color: #ee0a24;
  font-weight: 500;
}
.order .van-nav-bar__right div {
  margin-left: 0.15rem;
  i {
    font-size: 24px;
    color: #666;
  }
  span {
    display: block;
    color: #666;
    font-size: 10px;
  }
}
.order .van-notice-bar {
  font-size: 10px;
  line-height: 18px;
}
.order .van-notice-bar__left-icon {
  align-self: flex-start;
}
.order .van-empty__description {
  font-size: 16px;
  color: #666;
}
.orderList {
  margin: 0.2rem 0;
  padding: 0.2rem 0;
  border-bottom: 2px solid #eee;
  background: #fff;
  .orderFooter {
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .orderId {
      font-size: 0.12rem;
      color: #aaa;
    }
  }
}
.orderPrice {
  color: red;
  font-weight: bold;
}
.order .van-tag {
  margin-right: 0.1rem;
}
</style>
